<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-05-13 15:40:53
 * @LastEditTime: 2022-06-24 10:25:23
-->
<template>
  <div class="floor-price-desc" v-if="showData!=null">
    <div>
      <div v-if="isConExamine || (orderStatusName=='认购')" class="flex flex-vertical-center">
        <p class="title">破底价说明</p>
        <p class="process" v-if="isShowbasePrice" @click="viewProcessFun">查看流程</p>
      </div>
      <div v-else>
        <p class="title">破底价审核</p>
      </div>
    </div>
    <div class="desc-content">
      <ul>
        <li v-for="(itemObj,indexObj) in list" :key="indexObj">
          <p class="text">{{itemObj.title}}{{showData[itemObj.key]}}</p>
          <div v-if="showData[itemObj.imgsKey]!='-'" class="flex">
            <div v-for="(item,index) in showData[itemObj.imgsKey].split(',')" :key="index"
              class="small-img hand position-relative"
              :style="{'width':'100px','height':'100px'}">
              <img :src="item" class="img-show width-100 height-100">
              <div class="list-cover flex flex-vertical-center">
                <Icon type="ios-eye-outline" :size="22"
                  @click.native="preViewImgFun(index,itemObj.imgsKey)">
                </Icon>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage">
    </preview-image>
  </div>
</template>
<script>
  export default {
    components: {},
    props: ['detailMsg', 'orderStatusName'],
    data() {
      return {
        subList: [
        {
          title: '认购破底价说明：',
          key: 'subBreakExplain',
          imgsKey: 'subBreakAnnex'
        }],
        cusList: [
        {
          title: '签约破底价说明：',
          key: 'orConBreakExplain',
          imgsKey: 'orConBreakAnnex'
        }],
        showData: {},
        list: [],
        preViewImg: [],
        showIndex: 0,
        isConExamine: false,
        isShowbasePrice: true
      }
    },
    mounted() {
      // 展示数据
      this.showData = this.detailMsg.orBreakLowPrice
      if (this.orderStatusName == '认购') {
        this.list = this.subList
      } else {
        if (this.detailMsg.orContractBaseInfoVO.status != 10102 || this.detailMsg
          .orContractBaseInfoVO.isBreakLowPrice == 1) {
          this.list = this.subList.concat(this.cusList)
          this.isConExamine = true
        } else {
          this.list = this.subList
          this.isConExamine = false
        }
      }
      console.log(this.$route.query.isShowbasePrice, '123')
      this.isShowbasePrice = this.$route.query.isShowbasePrice == 'basePrice' ? false : true
    },
    methods: {
      preViewImgFun(index, key) {
        this.preViewImg = this.showData[key].split(',')
        this.showIndex = index
        this.$refs.preViewImage.show()
      },
      // 查看流程
      viewProcessFun() {
        this.$router.push({
          name: 'basePriceManagement',
          params: {
            instanceId: this.detailMsg.orBreakLowPrice.instanceId
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .floor-price-desc {
    margin-top: 40px;

    .process {
      margin-left: 20px;
      color: #2d8cf0;
      border-bottom: 1px solid #2d8cf0;
      cursor: pointer;
    }

    .text {
      padding: 10px 0;
      color: #333;
    }

    .list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      justify-content: space-around;
    }

    .small-img {
      margin-right: 10px;
    }

    .small-img:hover .list-cover {
      display: flex;
    }

    .list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }

    .desc-content {
      margin-left: 50px;
    }
  }
</style>